<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>用户管理</title>
	<link rel="stylesheet" href="../../component/pear/css/pear.css">
	<script src="../../js/myUtils.js"></script>
</head>

<body class="pear-container">
	<div class="layui-card">
		<div class="layui-card-body">
			<form class="layui-form" action="">
				<div class="layui-form-item">
					<div class="layui-form-item layui-inline">
						<label class="layui-form-label">姓名</label>
						<div class="layui-input-inline">
							<input type="text" name="name" placeholder="" class="layui-input">
						</div>
					</div>

					<div class="layui-form-item layui-inline">
						<label class="layui-form-label">角色</label>
						<div class="layui-input-inline">
							<select name="role" id="role">
								<option value="-1"></option>
								<option value="0">管理员</option>
								<option value="1">录入员</option>
							</select>
						</div>
					</div>
					<div class="layui-form-item layui-inline">
						<label class="layui-form-label">部门</label>
						<div class="layui-input-inline" id="departmentDIV">

						</div>
					</div>

					<div class="layui-form-item layui-inline">
						<button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="user-query">
							<i class="layui-icon layui-icon-search"></i>
							查询
						</button>
						<button type="reset" class="pear-btn pear-btn-md">
							<i class="layui-icon layui-icon-refresh"></i>
							重置
						</button>
					</div>
				</div>
			</form>
		</div>
	</div>
	<div class="layui-card">
		<div class="layui-card-body">
			<table id="user-table" lay-filter="user-table"></table>
		</div>
	</div>

	<script type="text/html" id="user-toolbar">
		<button class="pear-btn pear-btn-primary pear-btn-md" style="cursor: default;"> 
			<i class="layui-icon layui-icon-console"></i> 系统用户
		</button>
	</script>

	<script type="text/html" id="user-bar">
		<button class="pear-btn pear-btn-warming pear-btn-sm" lay-event="resetPwd"><i class="layui-icon layui-icon-password" title="重置密码"></i></button>
		<button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove"><i class="layui-icon layui-icon-delete" title="删除"></i></button>
	</script>

	<script type="text/html" id="userDepartmentHtml">
		<select name="department" id="department">
			{{# layui.each(d, function(index, item){ }}
				<option value={{item.value}}>{{item.label}}</option>
			{{# }); }}
		</select>
	</script>

	<script src="../../component/layui/layui.js"></script>
	<script src="../../component/pear/pear.js"></script>
	<script>
		var department = layui.data('options').data.sendDepartment
		department.push({
			value: -2,
			label: '扫黑办线索管理中心'
		})
		var userInfoData = layui.data('userInfo').item

		layui.use(['table', 'form', 'jquery', 'common', 'laytpl', 'request', 'Api'], function () {
			let $ = layui.jquery,
				table = layui.table,
				form = layui.form,
				laytpl = layui.laytpl,
				Api = layui.Api,
				request = layui.request;


			initDepartmentView()

			function initDepartmentView() {
				var userDepartmentTpl = userDepartmentHtml.innerHTML,
					departmentDIV = document.getElementById('departmentDIV');
				laytpl(userDepartmentTpl).render(department, function (html) {
					departmentDIV.innerHTML = html;
				});
				form.render()
			}

			var userVO = {
				"name": null,
				"role": null,
				"departmentCode": null,
				"username": null,
				"password": null
			}
			var pageChooseRight = [10, 100]
			table.render({
				elem: '#user-table',
				url: Api.userSearch,
				where: { userVO: userVO },
				method: 'post',
                contentType: 'application/json',
                request: {
                    pageName: 'page_index', //页码的参数名称，默认：page
                    limitName: 'page_size'  //每页数据量的参数名，默认：limit
                },
				headers: {
					'token': localStorage.token
				},
				page: {
					limit: 10,
					limits: pageChooseRight,
				},
				loading: false,
				skin: 'line',
				toolbar: '#user-toolbar',
				defaultToolbar: [{
					title: '刷新',
					layEvent: 'refresh',
					icon: 'layui-icon-refresh',
				}, 'filter', 'print', 'exports'],
				parseData: function (res) { //res 即为原始返回的数据
					if (res.errno != 0) {
						layer.alert(res.errmsg, { icon: 2 }, function (index) {
							layer.close(index);
						});
					}
					pageChooseRight.pop()
					pageChooseRight.push(res.data.total)
					return {
						"code": res.errno, //解析接口状态
						"msg": res.errmsg, //解析提示文本
						"count": res.data.total, //解析数据长度
						"data": res.data.list //解析数据列表
					};
				},
				cols: [
					[
						{ sort: false, align: 'center', hide: false, type: 'numbers', fixed: 'left', title: '序号' },
						{ sort: false, align: 'center', hide: true, type: 'id', fixed: 'left', title: 'ID' },
						{ sort: true, align: 'center', hide: false, field: 'name', title: '真实姓名' },
						{ sort: true, align: 'center', hide: false, field: 'role', title: '系统角色', },
						{ sort: true, align: 'center', hide: false, field: 'username', title: '用户名' },
						{ sort: true, align: 'center', hide: false, field: 'departmentName', title: '所在部门', },
						{ sort: false, align: 'center', hide: false, fixed: 'right', title: '操作', toolbar: '#user-bar' }
					]
				],
			});

			table.on('tool(user-table)', function (obj) {
				if (obj.event === 'remove') {
					window.remove(obj.data['id']);
				} else if (obj.event === 'resetPwd') {
					window.resetPwd(obj.data['id'])
				}
			});

			window.resetPwd = function (id) {
				layer.confirm('确定重置该用户密码', {
					icon: 3,
					title: '提示'
				}, function (index) {
					layer.close(index);
					let url = Api.resetPwd + '/' + id
					let success = function (res) {
						if (res.errno == 0) {
							layer.msg('重置密码成功', { icon: 1 })
						}
						else {
							layer.alert(res.errmsg, { icon: 2 });
						}
					}
					request.post(url, {}, success)
				});
			}

			window.remove = function (id) {
				layer.confirm('确定要删除该用户', {
					icon: 2,
					title: '警告'
				}, function (index) {
					layer.close(index);
					let url = Api.user + '/' + id
					let success = function (res) {
						if (res.errno == 0) {
							layer.msg('已删除该用户', { icon: 1 })
							window.refresh();
						}
						else {
							layer.alert(res.errmsg, { icon: 2 });
						}
					}
					request.delete(url, {}, success)
				});
			}

			window.refresh = function (param) {
				table.reload('user-table');
			}

			table.on('toolbar(user-table)', function (obj) {
				if (obj.event === 'refresh') {
					window.refresh();
				}
			});

			/** 更新搜索的参数 **/
			function updateParams(params) {
				console.log("params: ", params)
				userVO.name = params['name'] != '' ? $.trim(params['name']) : null
				userVO.role = params['role'] != '-1' ? parseInt(params['role']) : null
				userVO.departmentCode = params['department'] != '-1' ? parseInt(params['department']) : null
				console.log("userVO: ", userVO)
			}

			/** 根据姓名搜索用户 **/
			form.on('submit(user-query)', function (data) {
				updateParams(data.field)
				table.reload('user-table', {
					where: { userVO: userVO }
				})
				return false;
			});
		})
	</script>
</body>

</html>